<template>
  <div>
    <a-card class="br-10" title="系统配置" :bordered="false">
      <div class="btn-right" slot="extra">
        <a-button v-has="'system:sysConfig:save'" class="btn-style" type="primary" @click="save">保存</a-button>
      </div>
      <a-form :form="form" ref="infoForm" class="ant-advanced-search-form">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="系统名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['sysName']" />
              <a-input v-decorator="['id']" hidden />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="版权所有" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['rightReserved']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="系统标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['sysTitle']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="备案号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['recordNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="备案号链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['recordNumberLink']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="系统版本" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['version']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否闭站" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-switch v-decorator="['stationStatusBool', { valuePropName: 'checked' }]" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="闭站提示" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['stationCloseInfo']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="客服电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['serviceTel']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card class="br-10 _mt-20" title="图片设置" :bordered="false">
      <a-row>
        <a-col :xl="9" :lg="12" :md="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="网站LOGO">
            <UploadImg v-model="logoUrlImages.imagePathBig" />
          </a-form-item>
        </a-col>
        <a-col :xl="9" :lg="12" :md="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="登录背景图">
            <UploadImg v-model="backgroundUrl" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>
    <a-card class="br-10 _mt-20" title="用户协议" :bordered="false">
      <Ueditor v-model="content" editorId="sysConfig" />
    </a-card>
  </div>
</template>

<script>
import { settingInfo, settingUpdate } from '@/api/system/system'
import  { pick } from 'lodash'
import Ueditor from '@/components/Ueditor'
import UploadImg from '@/components/UpFile/uploadImg'
import { getImagePathSmall } from '@/utils/common'
export default {
  name: 'sysConfig',
  components: {
    Ueditor,
    UploadImg
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      form: this.$form.createForm(this),
      logoUrlImages: {},
      backgroundUrl: '',
      content: null,
      defaultFileList: [],
    }
  },
  created() {
    this.getSettingInfo()
  },
  mounted() {
  },
  methods: {
    // 获取信息
    getSettingInfo() {
      return settingInfo()
        .then(res => {
          if (res.code === 0) {
            if (res.data.stationStatus === 0) {
              res.data.stationStatusBool = false
            } else {
              res.data.stationStatusBool = true
            }
            if (res.data.userAgreement) {
              this.content = res.data.userAgreement
            }
            this.defaultFileList = []
            if (res.data.apkPath) {
              this.defaultFileList.push({
                uid: 1,
                name: '安卓包版本号(' + res.data.androidVersion + ')',
                status: 'done',
                url: res.data.apkPath,
                apkPath: res.data.apkPath
              })
            }
            this.apkPath = res.data.apkPath
            this.logoUrlImages = res.data.logoUrl
            this.backgroundUrl = res.data.backgroundUrl
            this.form.setFieldsValue(pick(res.data, 'id', 'sysName', 'stationStatusBool', 'rightReserved', 'sysTitle',
              'recordNumber', 'version', 'serviceTel', 'stationCloseInfo', 'androidVersion', 'iosVersion', 'recordNumberLink'))
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    // 保存
    save(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var data = JSON.parse(JSON.stringify(values))
          if (this.content) {
            data.userAgreement = this.content
          }
          data.logoUrl = {
            imagePathBig: this.logoUrlImages.imagePathBig,
            imagePathSmall: getImagePathSmall(this.logoUrlImages.imagePathBig),
            remark: this.logoUrlImages.remark,
          }
          data.backgroundUrl = this.backgroundUrl
          if (values.stationStatusBool) {
            data.stationStatus = 1
          } else {
            data.stationStatus = 0
          }
          data.apkPath = this.apkUrl
          delete data.stationStatusBool
          return settingUpdate(data).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功!')
              this.getSettingInfo()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  },
  watch: {
    value(val) {
      this.content = val
    }
  }
}
</script>

<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.avatar-uploader>>>img {
  width: 100px;
}

.card {
  margin-bottom: 20px;
}

.search-style {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
}
</style>
<style scoped>
.ql-editor {
  height: 200px;
}
</style>
